<template>
  <ButtonGroup size="small">
    <!-- 组合按钮 多选时不可用 -->
    <Button v-show="isMultiple" @click="group"><img src="../assets/icons/group.png" width="14" height="14"/></Button>
    <!-- 拆分组合按钮，为单选且组元素时可用 -->
    <Button v-show="isGroup" @click="unGroup"><img src="../assets/icons/ungroup.png" width="14" height="14"/></Button>
  </ButtonGroup>
</template>

<script>
import select from '@/mixins/select'

export default {
  name: 'ToolBar',
  mixins: [select],
  data() {
    return {
    };
  },
  computed: {
    // 单选且等于组元素
    isGroup() {
      return (this.mSelectMode === 'one' && this.mSelectOneType === 'group')
    },
    // 是否为多选
    isMultiple(){
      return (this.mSelectMode === 'multiple')
    },
  },
  methods:{
    // 拆分组
    unGroup(){
      // 先获取当前选中的对象，然后打散
      this.canvas.c.getActiveObject().toActiveSelection()
      this.canvas.c.discardActiveObject().renderAll();
    },
    group(){
      // 组合元素
      var activeObj = this.canvas.c.getActiveObject();
      var activegroup = activeObj.toGroup();
      var objectsInGroup = activegroup.getObjects();
      activegroup.clone((newgroup) => {
          this.canvas.c.remove(activegroup);
          objectsInGroup.forEach((object) => {
              this.canvas.c.remove(object);
          });
          this.canvas.c.add(newgroup);
          this.canvas.c.setActiveObject(newgroup);
      });
    }
  }
};
</script>
<style scoped lang="less">
/deep/ .ivu-btn[disabled]{
  img{ opacity: 0.2;}
}
</style>
